// pg组件实现
window.add_pg = function(x, y, w, h, max, current, hide, tag, callback, divid) {
    // 确保参数有默认值
    x = x || 100;
    y = y || 100;
    w = w || 200;
    h = h || 20;
    max = max || 100;
    current = current || 0;
    hide = hide || false;
    tag = tag || '';
    callback = callback || null;
    
    // 生成唯一ID
    const id = 'pg_' + Date.now() + '_' + Math.floor(Math.random() * 10000);
    
    // 创建进度条容器
    const pg = document.createElement('div');
    pg.id = id;
    
    // 创建进度条背景
    const bg = document.createElement('div');
    bg.style.position = 'absolute';
    bg.style.width = '100%';
    bg.style.height = '100%';
    bg.style.backgroundColor = '#f5f5f5';
    bg.style.borderRadius = '3px';
    
    // 创建进度条前景
    const fg = document.createElement('div');
    fg.style.position = 'absolute';
    fg.style.width = `${(current / max) * 100}%`;
    fg.style.height = '100%';
    fg.style.backgroundColor = '#009688';
    fg.style.borderRadius = '3px';
    
    // 创建进度文本
    const text = document.createElement('div');
    text.style.position = 'absolute';
    text.style.width = '100%';
    text.style.height = '100%';
    text.style.lineHeight = h + 'px';
    text.style.textAlign = 'center';
    text.style.color = '#333';
    text.textContent = `${current}/${max}`;
    
    // 组装进度条
    pg.appendChild(bg);
    pg.appendChild(fg);
    pg.appendChild(text);
    
    // 设置样式
    pg.style.position = 'absolute';
    pg.style.left = x + 'px';
    pg.style.top = y + 'px';
    pg.style.width = w + 'px';
    pg.style.height = h + 'px';
    
    // 附加样式和标记
    if (hide) pg.style.display = 'none';
    if (tag) pg.setAttribute('data-tag', tag);
    
    // 事件处理
    pg.onmousemove = function(e) { handleEvent(id, 0, `${current}/${max}`, tag, e.clientX, e.clientY, null, callback, divid); };
    pg.onclick = function(e) { handleEvent(id, 1, `${current}/${max}`, tag, e.clientX, e.clientY, null, callback, divid); };
    pg.oncontextmenu = function(e) { e.preventDefault(); handleEvent(id, 2, `${current}/${max}`, tag, e.clientX, e.clientY, null, callback, divid); return false; };
    pg.onmouseover = function(e) { handleEvent(id, 5, `${current}/${max}`, tag, e.clientX, e.clientY, null, callback, divid); };
    pg.onmouseout = function(e) { handleEvent(id, 6, `${current}/${max}`, tag, e.clientX, e.clientY, null, callback, divid); };
    pg.onkeydown = function(e) { handleEvent(id, 3, `${current}/${max}`, tag, 0, 0, e.key, callback, divid); };
    pg.onkeyup = function(e) { handleEvent(id, 4, `${current}/${max}`, tag, 0, 0, e.key, callback, divid); };
    
    // 添加到页面或指定父div
    const parent = divid ? document.getElementById(divid) : document.body;
    parent.appendChild(pg);
    
    // 初始化pgs存储空间
    if (!elementStore.pgs) {
        elementStore.pgs = {};
    }
    
    // 存储引用
    elementStore.pgs[id] = {
        element: pg,
        bg: bg,
        fg: fg,
        text: text,
        max: max,
        current: current
    };
    
    return id;
}

window.del_pg = function(id) {
    if (elementStore.pgs[id]) {
        elementStore.pgs[id].element.remove();
        delete elementStore.pgs[id];
    }
}

window.upd_pg = function(id, x, y, w, h, max, current, hide, textType) {
    const pg = elementStore.pgs[id];
    if (pg) {
        if (x !== undefined) pg.element.style.left = x + 'px';
        if (y !== undefined) pg.element.style.top = y + 'px';
        if (w !== undefined) pg.element.style.width = w + 'px';
        if (h !== undefined) {
            pg.element.style.height = h + 'px';
            pg.text.style.lineHeight = h + 'px';
        }
        if (max !== undefined) pg.max = max;
        if (current !== undefined) pg.current = current;
        
        // 更新进度条
        if (max !== undefined || current !== undefined) {
            const percent = (pg.current / pg.max) * 100;
            pg.fg.style.width = `${percent}%`;
            
            // 更新文本
            if (textType === undefined || textType === 2) {
                pg.text.textContent = `${pg.current}/${pg.max}`;
            } else if (textType === 3) {
                pg.text.textContent = `${Math.round(percent)}%`;
            } else if (textType === 1) {
                pg.text.textContent = '';
            }
        }
        
        if (hide !== undefined) pg.element.style.display = hide ? 'none' : 'block';
    }
}